<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>音乐网站</title>
    <link href="/img/favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" type="text/css" href="/css/public.css">
    <link rel="stylesheet" type="text/css" href="/css/index.css">
    <link rel="stylesheet" href="/css/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/musicAudio.css">
</head>
<!--音乐播放页面-->
<body>
    <div id="head2">
        <div id="head2-contain">
            <div id="head2-contain-left">音乐共享网站</div>
            <div id="head2-contain-right">
                <i class="fa fa-search"></i>
                <input type="text" id="head2-contain-right-text" placeholder="醉清风" style="height: 27px">
                <div id="head2-btn">搜索</div>
            </div>
        </div>
    </div>
    <div id="guider1">
        <div class="guider2">
            <div class="guide g" id="index" >首页</div>
            <div class="guide g" id="music" >在线音乐</div>
            <div class="guide g" id="singer" >歌手</div>
            <div class="guide g" id="album" >音乐专辑</div>
            <div class="guide" id="index_home" >在线空间</div>
        </div>
    </div>
    <!-- 内容 -->
    <div class="Box">
        <div class="BTop">
            <div class="BTLeft">
                <img th:src="${music.getCover()}" alt="error">
            </div>
            <!-- 右侧信息 -->
            <div class="BTRight">
                <div class="spans musicName">
                    <span id="msg-music-name" th:text="${music.getName()}"></span>
                </div>
                <div class="spans singer">
                    <span>歌手：<a class="a-text" th:href="'/singer/'+${singerAlbumInfo.getSingerId()}" th:text="${singerAlbumInfo.getSingerName()}"></a></span>
                </div>
                <div class="spans album">
                    <span>专辑：<a class="a-text" th:href="'/album/albumInfo?albumId='+${singerAlbumInfo.getAlbumId()}" th:text="${singerAlbumInfo.getAlbumName()}"></a></span>
                </div>
                <div class="btnList">
                    <div class="btn" id="play">播放</div>
                    <div class="btn">分享</div>
                    <div class="btn">收藏</div>
                    <div class="btn">下载</div>
                    <div class="btn" id="focusComment">评论</div>
                </div>
            </div>
        </div>
        <!-- 播放器 -->
        <div class="BBot">
        <img th:src="${music.getCover()}" alt="error" class="mImg">
        <div class="dv mName" id="musicName" th:text="${music.getName()}"></div>
        <div class="dv mBtn unSelect" id="mark">
            <i class="fa fa-backward playBtn"></i>
            <i class="fa fa-play playBtn audioPlay"></i>
            <i class="fa fa-forward playBtn"></i>
            <i class="fa fa-star-o star"></i>
            <i class="fa fa-heart-o love"></i>
            <div class="voiceBox unSelect">
                <i class="fa fa-volume-up voice"></i>
                <div class="soud">
                    <div class="soudLength">
                        <i class="fa fa-dot-circle-o doc1" id="doc1"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="dv mBar unSelect">
            <div class="time">
                <div class="length">
                    <i class="fa fa-dot-circle-o doc" id="doc"></i>
                </div>
            </div>
            <span class="nowTime">00:00</span><span class="allTime">/00:00</span>
        </div>
    </div>
    </div>

    <audio th:src="${music.getPath()}" id="audio" preload="auto"></audio>

    <!-- 评论 -->
    <div id="commentBox">
        <div id="myCommentBox">
            <div id="title">评论<span>共<span class="commentNum" th:text="${commentCount}"></span>条评论</span></div>
            <textarea id="myCommentText" placeholder="评论" class="myComText"></textarea>
            <img th:src="${userMsg?.getCover()}" id="myCommentCover">
            <span id="commentLength"><span class="comLength">0</span>/140</span>
            <div id="commentBtn">评论</div>
        </div>
        <div class="commentTitle">热门评论</div>
        <div id="hotCommentList" class="commentList">
            <div class="commentItem" th:each="comment : ${commentHotList}">
                <div class="itemLeft">
                    <a href="#"><img th:src="${comment.getUsercover()}" ></a>
                </div>
                <div class="itemRight">
                    <div class="itemRightTop">
                        <div class="commentText">
                            <a class="a-text" href="#" th:text="${comment.getUsername()+': '}"></a>
                            <span th:text="${comment.getText()}"></span>
                        </div>
                    </div>
                    <div class="itemRightBottom">
                        <span class="commentTime" th:text="${comment.getCreatetime()}"></span>
                        <div class="commentGrate">
                            <div class="grate" th:attr="id='hotCommentLike'+${comment.getCommentid()}">点赞</div>
                            <span th:text="${comment.getLikes()}+'赞'" th:attr="id='hotCommentLike'+${comment.getCommentid()}+'Num'"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="commentTitle" >最新评论</div>
        <div id="newCommentList" class="commentList">
            <div class="commentItem" th:each="comment : ${commentNewList}">
                <div class="itemLeft">
                    <img th:src="${comment.getUsercover()}" alt="">
                </div>
                <div class="itemRight">
                    <div class="itemRightTop">
                        <div class="commentText">
                            <a class="a-text" href="#" th:text="${comment.getUsername()+': '}"></a>
                            <span th:text="${comment.getText()}"></span>
                        </div>
                    </div>
                    <div class="itemRightBottom">
                        <span class="commentTime" th:text="${comment.getCreatetime()}"></span>
                        <div class="commentGrate">
                            <div class="grate" th:attr="id='newCommentLike'+${comment.getCommentid()}">点赞</div>
                            <span th:text="${comment.getLikes()}+'赞'" th:attr="id='newCommentLike'+${comment.getCommentid()}+'Num'"></span>
                        </div>
                    </div>
                </div>
            </div>




        </div>

    </div>

</body>
<script src="/js/jquery-3.4.1.js"></script>
<script th:inline="javascript">
    let userMsg=[[${userMsg}]];
    let music=[[${music}]];
</script>
<script src="/js/index2.js"></script>
<script src="/js/comment.js"></script>
<script src="/js/musicAudio.js"></script>
</html>